<template>
  <div class="app">
    <h2>当前sum1为: {{ sum1 }}</h2>
    <h2>当前sum2为: {{ sum2 }}</h2>
    <h2>当前car1汽车为: {{ car1 }}</h2>
    <button @click="changeSum1">点我sum1+1</button>
    <button @click="changeSum2">点我sum2+1</button>
    <button @click="changeBrand">修改品牌car1</button>
    <button @click="changeColor">修改颜色car1</button>
    <button @click="changePrice">修改价格car1</button>
    <h2>当前car2汽车为: {{ car2 }}</h2>
    <button @click="changeBrand2">修改品牌car2</button>
    <button @click="changeColor2">修改颜色car2</button>
    <button @click="changePrice2">修改价格car2</button>
    <h2>当前car3汽车为: {{ car3 }}</h2>
    <button @click="changeBrand3">修改品牌car3</button>
    <button @click="changeColor3">修改颜色car3</button>
    <button @click="changePrice3">修改价格car3</button>
  </div>
</template>

<script setup lang="ts" name="App">
import { ref, readonly, reactive, shallowReadonly } from 'vue'

let sum1 = ref(0)
// sum2 不能再更改
let sum2 = readonly(sum1)

function changeSum1() {
  sum1.value += 1
}
// sum2 不能再更改
function changeSum2() {
  sum2.value += 1
}

let car1 = reactive({
  brand: '奔驰',
  options: {
    color: '红色',
    price: 100,
  },
})
// readonly 用于创建一个对象的深只读副本
let car2 = readonly(car1)
// shallowReadonly  与 readonly 类似，但只作用于对象的顶层属性
let car3 = shallowReadonly(car1)

function changeBrand() {
  car1.brand = '宝马'
}
function changeColor() {
  car1.options.color = '绿色'
}
function changePrice() {
  car1.options.price += 10
}
function changeBrand2() {
  car2.brand = '宝马'
}
function changeColor2() {
  car2.options.color = '绿色'
}
function changePrice2() {
  car2.options.price += 10
}

function changeBrand3() {
  car3.brand = '宝马'
}
function changeColor3() {
  car3.options.color = '绿色'
}
function changePrice3() {
  car3.options.price += 10
}
</script>

<style scoped></style>
